<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <p>v-if隐藏元素的方式：删除元素；v-show隐藏元素的方式：display：none</p>
        <p>当频繁切换时应该使用v-show；v-if的初始化开销很小，v-show的初始化开销比较大</p>
        <p>v-if指令：在条件满足时显示元素，不满足时隐藏元素</p>
        <p v-if="isLogin">{{name}}</p>
        <p v-else>请登录</p>
        <hr>
        <p>以下是v-show的写法</p>
        <p v-show="isLogin">{{name}}</p>
        <p v-show="!isLogin">请登录</p>
        <hr>
        <input type="text" v-model="age">
        <p v-if="age < 18">未成年人</p>
        <p v-else-if="age >= 18 && age < 60">成年人</p>
        <p v-else>老年人</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#div',
            data: {
                isLogin: false,
                name: 'Tom',
                age: 18
            }
        })
    </script>
</body>
</html>